<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<form action="javascript:;" id="uploadForm" method="post" enctype="multipart/form-data">
    <input type="file" name="upFile" id="upInput"><br>
</form>
<img style="width: 300px" src="" alt="现在没有，上传之后就有图了" id="showContainer">

<script src="js/jquery-1.7.2.js"></script>
<script>

    $(function (){
        //文件上传组件的变化的监听
        $("#upInput").change(function (){

            //构建表单对象
            let formData = new FormData($("#uploadForm").get(0));

            //发送ajax请求
            $.ajax({
                type: 'post',
                url: '/up',
                data: formData,  //请求参数 表单对象
                cache: false,
                processData: false,
                contentType: false,
                success: function (resData){
                    $("#showContainer").attr("src",resData);
                }
            })

        })

    })

</script>

</body>
</html>